<template>
  <el-dialog
    :model-value="dialogDetails"
    width="55%"
    :before-close="handleClose"
  >
    <h3>活动详情</h3>
    <el-divider />
    <div v-loading="loading" element-loading-text="Loading...">
      <el-descriptions :column="2" size="large">
        <el-descriptions-item label="活动名称：">
          {{ descriptionsData.title }}
        </el-descriptions-item>
        <el-descriptions-item label="活动时间：">
          {{ descriptionsData.durationStartTime }} -
          {{ descriptionsData.durationEndTime }}
        </el-descriptions-item>
        <el-descriptions-item label="活动地点：">
          {{ descriptionsData.destName }}
        </el-descriptions-item>
        <el-descriptions-item label="活动类型：">
          {{ descriptionsData.typeName }}
        </el-descriptions-item>
        <el-descriptions-item label="活动标签：">
          <el-tag
            size="small"
            v-for="(item, index) in descriptionsData.tags"
            :key="index"
            style="margin-right: 5px"
          >
            {{ item }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系方式：">
          {{ descriptionsData.contact }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" size="large">
        <el-descriptions-item label="票种设置："></el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="ticketsData"
        border
        size="small"
        fit
        stripe
        show-header
        empty-text="暂无数据"
        max-height="300px"
        style="width: 100%; margin-bottom: 5px"
        :header-cell-style="{ background: '#e7e1fb' }"
      >
        <el-table-column prop="ticketName" label="票种名称" />
        <el-table-column prop="name" label="票种类型" v-slot="scope">
          {{ scope.row.price > 0 ? '收费票' : '免费票' }}
        </el-table-column>
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="singleNum" label="人数" />
        <el-table-column prop="bookStartTime" label="售票开始时间" />
        <el-table-column prop="bookEndTime" label="售票结束时间" />
        <el-table-column prop="validStartTime" label="有效开始时间" />
        <el-table-column prop="validEndTime" label="有效结束时间" />
        <el-table-column prop="description" label="票种说明" />
        <el-table-column prop="isOnSale" label="开售中" v-slot="scope">
          {{ scope.row.isOnSale === 0 ? '否' : '是' }}
        </el-table-column>
      </el-table>

      <el-descriptions :column="2" size="large">
        <el-descriptions-item label="活动名片："></el-descriptions-item>
        <el-descriptions-item label="活动最低成行人数：">
          {{ descriptionsData.minNumOfPeople + '人' }}
        </el-descriptions-item>
        <el-descriptions-item label="授权场地方核销本活动：">
          {{ descriptionsData.isWrittenOff === 0 ? '否' : '是' }}
        </el-descriptions-item>
        <el-descriptions-item label="报名进行人工审核：">
          {{ descriptionsData.isManualReviewed === 0 ? '否' : '是' }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" size="large">
        <el-descriptions-item label="公开度：" :column="1">
          {{ descriptionsData.openness === 0 ? '所有人不可见' : '所有人可见' }}
        </el-descriptions-item>
        <el-descriptions-item label="活动图片：">
          <br />
          <el-image
            v-for="(item, index) in descriptionsData.imgUrls"
            :key="index"
            style="width: 120px; height: 120px; margin: 10px 5px 0 0"
            :src="item"
            fit="fill"
          />
        </el-descriptions-item>
        <el-descriptions-item label="活动内容：">
          <br />
          {{ descriptionsData.introduce }}
        </el-descriptions-item>

        <el-descriptions-item label="参与者加入活动后,需要展示的信息：">
          <br />
          {{ descriptionsData.showToParticipants }}
        </el-descriptions-item>
        <el-descriptions-item label="报名须知：">
          <br />
          {{ descriptionsData.participateInNotice }}
        </el-descriptions-item>
        <el-descriptions-item label="退款须知：">
          <br />
          {{ descriptionsData.refundNotice }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getActivityDetail } from '@/api/Activity/ActivityMent';
import { onMounted, onUpdated, ref } from 'vue';
const descriptionsData = ref({});
const loading = ref(true);
const ticketsData = ref([]);

const emit = defineEmits(['carry', 'cancel', 'refuse']);

const props = defineProps({
  dialogDetails: {
    type: Boolean,
  },
  activityId: {
    type: String,
  },
});
const DetailsHandle = async () => {
  loading.value = true;
  const res = await getActivityDetail(props.activityId);
  if (res.data.code === 200) {
    descriptionsData.value = res.data.data;
    ticketsData.value = res.data.data.tickets;
    loading.value = false;
  }
};

const handleCancel = () => {
  emit('cancel');
};
const handleClose = () => {
  handleCancel();
};
onMounted(() => {});
onUpdated(() => {
  DetailsHandle();
});
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  color: #afb1b3;
}
</style>
